<template>
  <transition :name="type">
    <slot></slot>
  </transition>
</template>
<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'slide'
      }
    }
  };
</script>

<style lang="scss" scoped>
  /*
   * slide: 进入时从右边滑入, 退出从右边滑出
   * slide-left: 进入时从左边滑入, 退出从左边滑出
   * static: 进入退出都是静止不动, 直接被覆盖
   * slide-to-static: 进入时从右边滑入, 退出时静止不动(直接被覆盖)
   * slide-left-to-static: 进入时从左边滑入, 退出时静止不动(直接被覆盖)
   * static-to-slide: 进入时直接覆盖之前页面, 退出时从右边滑出
   * static-to-slide-left: 进入时直接覆盖之前页面, 退出时从左边滑出
   * cross: 进入时从右边滑入, 退出时从左边滑出
   * cross-reverse: 进入时从左边滑入, 退出时从右边滑出
  */
  .slide-enter-active,
  .slide-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active,
  .static-enter-active,
  .static-leave-active,
  .slide-to-staic-enter-active,
  .slide-to-staic-leave-active,
  .slide-left-to-staic-enter-active,
  .slide-left-to-staic-leave-active,
  .static-to-slide-enter-active,
  .static-to-slide-leave-active,
  .static-to-slide-left-enter-active,
  .static-to-slide-left-leave-active,
  .cross-enter-active,
  .cross-leave-active,
  .cross-reverse-enter-active,
  .cross-reverse-leave-active {
    will-change: transform;
    transition: all .3s;
  }

  // 压缩版(Compressed)
  .slide-enter,
  .slide-leave-to,
  .slide-to-staic-enter,
  .static-to-slide-leave-to,
  .cross-enter,
  .cross-reverse-leave-to {
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-enter,
  .slide-left-leave-to,
  .slide-left-to-staic-enter,
  .static-to-slide-left-leave-to,
  .cross-leave-to,
  .cross-reverse-enter {
    transform: translate3d(-100%, 0, 0);
  }

  // static
  .static-enter,
  .static-leave-to,
  .slide-to-staic-leave-to,
  .slide-left-to-staic-leave-to,
  .static-to-slide-enter,
  .static-to-slide-left-enter {
    transform: translate3d(0, 0, 0);
  }
</style>
